import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import './login.less'
import type { FormInstance } from 'ant-design-vue'
import { LockOutlined } from '@ant-design/icons-vue'
import {
  Input,
  Form,
  Button,
  message,
  Modal,
  TreeSelect,
  TabPane,
} from 'ant-design-vue'
import loginApi from '@/api/login'
import { useStore } from '@/utils/useStore'
import Icon from '@/components/Icon'
import Tabs from './tabs'
export default defineComponent({
  name: 'Login',
  setup(props, { emit }) {
    type User = {
      loginId: string
      loginPassword: string
      loginCaptcha: string
    }

    const store = useStore()
    const router = useRouter()
    const formRef = ref<FormInstance>()
    const loading = ref<boolean>(false)
    const isLogin = ref(true)
    const form = reactive<User>({
      loginId: '',
      loginPassword: '',
      loginCaptcha: '',
    })
    const registerFormRef = ref<FormInstance>()
    const registerForm = reactive<User>({
      loginId: '',
      loginPassword: '',
      loginCaptcha: '',
    })

    // 将背景图转换为base64
    const image = {
      img: require('@/assets/img/login_bg.png'),
    }
    const onSubmit = () => {
      loading.value = true
      store
        .dispatch('user/Login', form)
        .then((res) => {
          if (res.code == '10000') {
            store.dispatch('user/getMenus').then((result: any) => {
              if (result.code == '10000') {
                localStorage.frontAsyncRoutes =
                  JSON.stringify(result.data) || ''
                store.commit('permissionModule/setAsyncRoute', result.data)
                store.dispatch('permissionModule/getPermissionRoutes')
              }
              if (result.data) router.push('/home')
            })
          } else {
            message.error(res.msg)
          }
          loading.value = false
        })
        .catch(() => {
          loading.value = false
          updateCode()
        })
    }
    // 验证码
    const imgCode = ref<any>()
    const updateCode = () => {
      // loginApi
      //   .getCaptchaImage({ id: uuid })
      //   .then((rsp: any) => {
      //     if (rsp.code == '10000') imgCode.value = rsp.data
      //   })
      //   .catch((error) => console.log(error))
    }
    updateCode()
    return () => {
      return (
        <div
          class="login_bg"
          style={{ background: `url(${image.img}) no-repeat` }}
        >
          <div class="login-content">
            {/* {isLogin.value ? (
              <div class="login_box">
                <span class="login-title">用户登录</span>
                <Form
                  ref={formRef}
                  model={form}
                  wrapperCol={{ span: 18, offset: 3 }}
                >
                  <Form.Item
                    name="loginId"
                    rules={[{ required: true, message: '请输入账号' }]}
                  >
                    <Input
                      placeholder="账号"
                      v-model:value={form.loginId}
                      style={{ height: '40px' }}
                      v-slots={{
                        prefix: () => <Icon icon="user" colors="#999"></Icon>,
                      }}
                    />
                  </Form.Item>
                  <Form.Item
                    name="loginPassword"
                    rules={[{ required: true, message: '请输入密码' }]}
                  >
                    <Input
                      type="password"
                      placeholder="密码"
                      v-model:value={form.loginPassword}
                      style={{ height: '40px' }}
                      v-slots={{
                        prefix: () => (
                          <LockOutlined
                            class="site-form-item-icon"
                            style={{ color: '#999' }}
                          />
                        ),
                      }}
                    />
                  </Form.Item>
                  <Form.Item
                    name="loginCaptcha"
                    rules={[{ required: true, message: '验证码' }]}
                  >
                    <div class="captcha-wapper">
                      <Input
                        placeholder="输入验证码"
                        v-model:value={form.loginCaptcha}
                        style={{ width: '56%', height: '40px' }}
                      />
                      <img
                        src={imgCode.value}
                        class="img-code"
                        alt="验证码"
                        title="点击换一张"
                        style="width: 40%;height: 40px;"
                        onClick={updateCode}
                      />
                    </div>
                  </Form.Item>
                  <Form.Item class="login-btn-box">
                    <Button
                      type="primary"
                      onClick={onSubmit}
                      style={{ width: '100%', borderRadius: '4px' }}
                      loading={loading.value}
                    >
                      登录
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            ) : (
              <div class="login_box">
                <span class="login-title">用户注册</span>
                <Form
                  ref={registerFormRef}
                  model={registerForm}
                  wrapperCol={{ span: 18, offset: 3 }}
                >
                  <Form.Item
                    name="loginId"
                    rules={[{ required: true, message: '请输入账号' }]}
                  >
                    <Input
                      placeholder="账号"
                      v-model:value={form.loginId}
                      style={{ height: '40px' }}
                      v-slots={{
                        prefix: () => <Icon icon="user" colors="#999"></Icon>,
                      }}
                    />
                  </Form.Item>
                  <Form.Item
                    name="loginPassword"
                    rules={[{ required: true, message: '请输入密码' }]}
                  >
                    <Input
                      type="password"
                      placeholder="密码"
                      v-model:value={form.loginPassword}
                      style={{ height: '40px' }}
                      v-slots={{
                        prefix: () => (
                          <LockOutlined
                            class="site-form-item-icon"
                            style={{ color: '#999' }}
                          />
                        ),
                      }}
                    />
                  </Form.Item>
                  <Form.Item
                    name="loginCaptcha"
                    rules={[{ required: true, message: '验证码' }]}
                  >
                    <div class="captcha-wapper">
                      <Input
                        placeholder="输入验证码"
                        v-model:value={form.loginCaptcha}
                        style={{ width: '56%', height: '40px' }}
                      />
                      <img
                        src={imgCode.value}
                        class="img-code"
                        alt="验证码"
                        title="点击换一张"
                        style="width: 40%;height: 40px;"
                        onClick={updateCode}
                      />
                    </div>
                  </Form.Item>
                  <Form.Item class="login-btn-box">
                    <Button
                      type="primary"
                      onClick={onSubmit}
                      style={{ width: '100%', borderRadius: '4px' }}
                      loading={loading.value}
                    >
                      注册
                    </Button>
                    <Button type="link" onClick={() => (isLogin.value = true)}>
                      去登录
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            )} */}
            <div class="login_box">
              {isLogin.value ? (
                <>
                  <span class="login-title">用户登录</span>
                  <Tabs type={isLogin.value}></Tabs>
                </>
              ) : (
                <>
                  <span class="login-title">用户注册</span>
                  <Tabs type={isLogin.value}></Tabs>
                </>
              )}
              {/* <span class="login-title">用户登录</span>
              <Tabs></Tabs> */}
              <div class="df-end">
                {isLogin.value ? (
                  <Button type="link" onClick={() => (isLogin.value = false)}>
                    注册
                  </Button>
                ) : (
                  <Button type="link" onClick={() => (isLogin.value = true)}>
                    登录
                  </Button>
                )}
              </div>
            </div>
          </div>
          {/* <div class="footer">
            云车智途・版权所有 工信部备案号：
            <a href="https://beian.miit.gov.cn" target="_blank">
              渝ICP备18009381
            </a>
            <span>&nbsp;增值电信业务经营许可号：渝B2-20230401</span>
          </div> */}
        </div>
      )
    }
  },
})
